<script>
import { getAdminList, addAdmin, editAdmin, delAdmin } from '@/api/user'
import { Edit } from '@element-plus/icons-vue'
import { routes } from '../../router'

export default {
    name: 'admin',
    data() {
        return {
            adminList: [], // 管理员列表数据 
            currentPage: 1, // 当前页
            pageSize: 10, // 每页显示的数量
            dialogVisible: false, // 默认不显示添加窗口
            menus: routes[0].children, // 树形控件的数据
            formData: {
                // 用户表单数据
                adminname: '',
                password: '',
                role: 1,
                checkedKeys: []
            },
            drawer: false, // 编辑管理员的抽屉是否打开
            defaultCheckedKeys: [] // 编辑的时候默认被选中的节点数组
        }
    },
    methods: {
        // 获取树形组件中选择的内容
        formatCheckedKeys(type) {
            // console.log(this.$refs.addTree.getCheckedNodes());

            let list = []
            // list 获取所有被选中的子节点
            if (type == '10086') {
                // 编辑
                list = this.$refs.editTree.getCheckedNodes(true)
            } else {
                // 添加
                list = this.$refs.addTree.getCheckedNodes(true)
            }


            // 该数组是用来放父级路由 label 用的
            const tempList = []

            // 用来放所有结果的数组
            const result = []

            // 遍历所有被选中的子节点
            list.forEach(item => {
                // item 就是我们选择的子节点
                // this.menus 树形控件的数据
                const parent = this.menus.find(mitem => {
                    // item 是我们选中的节点
                    // mitem 是所有的父级节点，二级路由
                    // mitem.children 三级路由
                    return mitem.children.some(child => child.label == item.label)
                })

                // 找到选择的父级节点，二级路由
                // console.log(111111111, parent);

                if (tempList.includes(parent.label)) {
                    // 父级路由已经存在
                    // 直接将被选中的路由直接放在 result 中即可
                    result.find(item => item.label == parent.label).children.push(item)
                } else {
                    // 父级路由不存在
                    tempList.push(parent.label)

                    result.push({
                        label: parent.label,
                        path: parent.path,
                        icon: parent.icon,
                        children: [item]
                    })
                }
            })

            // console.log(111111, result);
            // 将用户选择的内容放在 formData 中
            this.formData.checkedKeys = result
        },
        close() {
            // 提交成功之后清除表单数据用的
            this.formData = {}
            // 清除树形组件的选中需要全部清除掉
            this.$refs.addTree.setCheckedNodes([])
        },
        addClick() {
            // 添加按钮的点击事件
            // 1. 获取表单数据，用户的账号密码和角色
            // console.log(this.formData);
            // 2. 获取用户选择的所有权限
            this.formatCheckedKeys()

            // console.log('添加前的数据收集：', this.formData);

            // 3. 将用户数据和权限发生给后端进行添加
            addAdmin(this.formData).then(res => {
                // console.log(res);
                // 4. 验证添加结果，根据结果做不同操作
                if (res.code == 200) {
                    // 添加成功
                    // 关闭对话框
                    this.dialogVisible = false
                    // 刷新表格最新数据
                    getAdminList().then(res => {
                        this.adminList = res.data
                        // 清空原来输入的内容
                        this.close()
                    })
                } else {
                    ElMessage.error('温馨提示：' + res.message)
                }
            })


        },
        // 编辑管理的点击事件
        editClick(row) {
            this.drawer = true
            // console.log(row);
            // this.formData.adminname = row.adminname
            // this.formData.password = row.password
            // this.formData.role = row.role
            this.formData = {
                adminname: row.adminname,
                password: row.password,
                role: row.role,
                checkedKeys: row.checkedKeys
            }

            // 要设置编辑的时候默认选中的内容
            // 默认选中的内容要通过 node-key
            // 用来放选中内容的 path
            const list = []

            // 遍历所有路由权限
            row.checkedKeys.forEach(parent => {
                if (parent.children) {
                    // 将有权限的路由 path 放在 list 数组中
                    parent.children.forEach(item => {
                        list.push(item.path)
                    })
                }
            })

            // 设置默认被选中的内容
            this.defaultCheckedKeys = list

        },
        editSubmit() {
            // 提交编辑的点击事件

            // 获取到表单的最新数据 账号、密码、角色
            // console.log(this.formData);

            // 获取选中的路由权限
            this.formatCheckedKeys('10086')

            // 发送数据请求就行更新
            editAdmin(this.formData).then(res => {
                // 更新结果，更新完毕后要做的操作
                if (res.code == 200) {
                    // 1. 关闭对话框
                    this.drawer = false


                    // 如果更新的是当前登录的用户，那么我们需要退出重新登录
                    if (this.formData.adminname == this.$store.state.userInfo.adminname) {
                        localStorage.clear()
                        this.$router.push('/login')
                    }
                    // 如果说更新的不是当前用户那么我们就要重新获取数据
                    else {
                        // 2. 清空内容
                        this.formData = {}
                        this.$refs.editTree.setCheckedNodes([])
                        // 3. 更新表格最新数据
                        getAdminList().then(res => {
                            this.adminList = res.data
                        })
                    }

                } else {
                    // 修改失败
                    ElMessage.error('温馨提示：' + res.message)
                }
            })



        },
        // 删除按钮的点击事件
        delClick(row) {
            // console.log(row.adminid);
            delAdmin({
                adminid: row.adminid
            }).then(res => {
                // console.log(res);
                if (res.code == 200) {
                    getAdminList().then(res => {
                        this.adminList = res.data
                    })
                }
            })
        }
    },
    mounted() {
        getAdminList().then(res => {
            // console.log(res.data);
            this.adminList = res.data
        })
    },
    components: {
        Edit
    },
    computed: {
        tableData() {
            return this.adminList.slice((this.currentPage - 1) * this.pageSize, (this.currentPage - 1) * this.pageSize + this.pageSize)
        }
    }
}
</script>
<template>
    <h2>
        管理员列表
        <el-button @click="dialogVisible = true">添加管理员</el-button>
    </h2>

    <el-table :data="tableData">

        <el-table-column label="序号">
            <template #default="data">
                <div>
                    {{ (currentPage - 1) * pageSize + data.$index + 1 }}
                </div>
            </template>

        </el-table-column>


        <!-- 
            el-table-column 配置列数据
            prop 是指定当前列显示的数据字段
            label 表头的标题
         -->
        <el-table-column label="管理员名称" prop="adminname" />

        <el-table-column label="管理员权限" prop="role">
            <!-- 
                插槽中有三个参数
                row：当前行需要使用到的对象数据，adminList 中的一个对象
                column: table 中的列数据
                $index：当前索引值
             -->
            <template #default="{ row, column, $index }">
                <el-tag :type="row.role == 2 ? 'danger' : ''">
                    {{ row.role == 1 ? '普通管理员' : '超级管理员' }}
                </el-tag>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template #default="{ row }">
                <el-button :disabled="$store.state.userInfo.role == 1" @click="editClick(row)" type="primary">
                    <el-icon>
                        <Edit />
                    </el-icon>
                    &nbsp;
                    编辑
                </el-button>
                <el-popconfirm v-if="$store.state.userInfo.role != 1" confirm-button-text="确定" cancel-button-text="取消"
                    @confirm="delClick(row)" :title="'您确定要删除: ' + row.adminname + ' 吗?'">
                    <template #reference>
                        <el-button type="danger">删除</el-button>
                    </template>
                </el-popconfirm>

            </template>
        </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination :page-size="pageSize" v-model:current-page="currentPage" background layout="prev, pager, next"
        :total="adminList.length" />

    <!-- ------------------------- 添加管理员 ------------------------ -->

    <el-dialog v-model="dialogVisible" title="添加管理员" width="40%">
        <el-form label-width="120px">
            <el-form-item label="管理员账号">
                <el-input v-model="formData.adminname" placeholder="请输入管理员账号" />
            </el-form-item>
            <el-form-item label="管理员密码">
                <el-input v-model="formData.password" placeholder="请输入管理员密码" />
            </el-form-item>

            <el-form-item label="管理员角色">
                <el-select v-model="formData.role" placeholder="请选择管理员角色">
                    <el-option label="普通管理员" :value="1" />
                    <el-option label="超级管理员" :value="2" />
                </el-select>
            </el-form-item>

        </el-form>
        <el-tree ref="addTree" :data="menus" show-checkbox node-key="path" default-expand-all />

        <el-button @click="addClick" style="width: 100%;margin-top: 10px;" type="primary"> 添加 </el-button>
    </el-dialog>

    <!-- ------------------------- 添加管理员 ------------------------ -->


    <!-- ------------------------- 编辑管理员 ------------------------ -->
    <el-drawer v-model="drawer" title="编辑管理员">
        <el-form label-width="120px">
            <el-form-item label="管理员账号">
                <el-input v-model="formData.adminname" placeholder="请输入管理员账号" />
            </el-form-item>
            <el-form-item label="管理员密码">
                <el-input type="password" v-model="formData.password" placeholder="请输入管理员密码" />
            </el-form-item>

            <el-form-item label="管理员角色">
                <el-select v-model="formData.role" placeholder="请选择管理员角色">
                    <el-option label="普通管理员" :value="1" />
                    <el-option label="超级管理员" :value="2" />
                </el-select>
            </el-form-item>

        </el-form>
        <el-tree ref="editTree" :default-checked-keys="defaultCheckedKeys" :data="menus" show-checkbox node-key="path"
            default-expand-all />

        <el-button @click="editSubmit" style="width: 100%;margin-top: 10px;" type="primary"> 提交 </el-button>
    </el-drawer>
    <!-- ------------------------- 编辑管理员 ------------------------ -->
</template>